<template>
	<div>
		<el-dialog  title="添加轮播图" v-model="compVisible" :before-close="handleClose" width="80%" custom-class="dialog-page">
			<el-form :model="formData" :rules="rules" label-width="100px" ref="form">
				<el-form-item prop="type" label="轮播图分类">
					<el-select v-model="formData.type" placeholder="选择分类" class="handle-select mr10">
						<el-option key="0" label="选择分类" value=""></el-option>
						<el-option key="1" label="PC端" value="1"></el-option>
						<el-option key="2" label="移动端" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="title" label="图片说明">
					<el-input v-model="formData.title" maxlength="30" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="上传图片">
					<el-upload
						class="avatar-uploader"
						action="https://sekiro.oss-cn-beijing.aliyuncs.com"
						:data="ossObject"
						:show-file-list="false"
						:on-success="uploadSuccess"
						:before-upload="beforeUpload">
						<div v-if="imageUrl" class="avatar" :style="'background-image: url(\''+(imageUrl ? imageUrl : '')+'\')'"></div>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="formData.status">
						<el-radio label="1">显示</el-radio>
						<el-radio label="0">隐藏</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="saveSubmit">确 定</el-button>
                </span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import {ref, reactive} from "vue";
import {ElLoading, ElMessage} from "element-plus";
import Axios from "../../utils/request"
import Methods from "../../utils/Methods";
export default {
	name: "SlideAdd",
	props: {
		compVisible: Boolean
	},
	setup(props,context) {
		const imageUrl = ref('')
		let tmpPic = ''
		const ossObject = reactive({
			OSSAccessKeyId: '', policy: '', Signature: '', dir: '', host: '', key: '',
		})
		const formData = reactive({
			title: '',
			type: '',
			status: '1'
		})
		let loading = null
		const loadingStart = () => {
			loading = ElLoading.service({
				lock: true,
				text: '正在提交',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0)',
			})
		}
		const handleClose = () => {
			context.emit('handleaddhide')
		}
		const beforeUpload = (file) => {
			console.log('beforeUpload------------')
			let ext = Methods.checkImage(file)
			if(ext === false) {
				return false
			}
			return new Promise((resolve, reject)=> {
				let data = {token : Methods.getLocalStorage('admin_token')}
				Axios.post('alioss/getPolicy',data).then(res => {
					ossObject.OSSAccessKeyId = res.data.accessid
					ossObject.policy = res.data.policy
					ossObject.Signature = res.data.signature
					ossObject.dir = res.data.dir
					ossObject.host = res.data.host
					ossObject.key = res.data.key + '.' + ext
					resolve(true)
				}).catch(err => {
					console.log(err,'-----getPolicy Error')
					reject(false)
				})
			})
		}
		const uploadSuccess = (response,file, fileList) => {
			console.log('success---------')
			imageUrl.value = ossObject.host + '/' + ossObject.key
			tmpPic = ossObject.key
			console.log(fileList)
		}
		const uploadError = (response) => {
			console.log('uploadError')
		}
		const form = ref(null);
		const rules = {
			title: [{required: true, message: "请填写说明", trigger: "blur",},],
			type: [{required: true, message: "请选择分类", trigger: "blur",},],
		};
		const saveSubmit = () => {
			form.value.validate((valid) => {
				if (valid) {
					if(tmpPic === '') {
						ElMessage.error('请上传图片')
						return false
					}
					let data = {
						title: formData.title,
						type: formData.type,
						status: formData.status,
						path:tmpPic,
						token: Methods.getLocalStorage('admin_token')
					}
					loadingStart()
					Axios.post('home/slideAdd',data).then(res => {
						loading.close()
						ElMessage.success("添加成功")
						context.emit('handleaddhide','success')
					}).catch(err => {
						console.log(err,'---slideadd')
						loading.close()
					})
				} else {
					return false;
				}
			});
		}
		return {
			formData, rules, form,
			imageUrl, ossObject,

			handleClose,
			beforeUpload,
			uploadSuccess,
			uploadError,
			saveSubmit,
		}
	},
	emits: ['handleaddhide']

}
</script>

<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
}
::v-deep(.dialog-page) {
	max-width: 1200px;
	min-width: 800px;
}

</style>
